<template>
    <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in banner" :key="item.index">
            <img :src="item.imgurl">
        </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev swiper-button"></div>
        <div class="swiper-button-next swiper-button"></div>
    </div>
</template>
<script>

export default {
    name:'banner',
    props:['banner'],
    data () {
      return {
        //banner:null,
        //:['//via.placeholder.com/1200x400','//via.placeholder.com/1200x400','//via.placeholder.com/1200x400'],
        swiperOption: {
            autoplay:this.banner.length>1?true:false,
            loop:true,
            loopedSlides:3,
            spaceBetween:1,
            centeredSlides:true,
            slidesPerView : 'auto', 
            pagination: {
                el: '.swiper-pagination'
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        }
      }
    },
    mounted(){
        //console.log('banner:',)
    }
}
</script>
<style scoped>
    .swiper-slide,.swiper-slide img{
        width:22.222222rem;
        height:7.407407rem;
    }
    .swiper-button{
        top:0;
        background-color:#000;
        background-image: inherit;
        width:6.481481rem;
        height: 7.814815rem;
        opacity: .3;
    }
    .swiper-button:hover{
        opacity: .7;
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        left:0
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        right:0;
    }
    
    /*.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
        left:10%;
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
        right:10%;
    }*/
</style>


